<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../../css/style.css"/>
    <style>
        .flex{display: -webkit-box; display: -webkit-flex; display: flex;}
        html,body{
            background-color: transparent;
        }
        .arrow-02 {
            width: 0.12rem;
            height: 0.12rem;
            background-size: 0.12rem 0.12rem;
            background-image: url("../../image/my/arrow02.png");
            margin-right: 0.20rem;
        }
    </style>
</head>
<body>
    <div class="flex" style="width: 100%; height: 0.90rem; justify-content: flex-end; background-color: #FFFFFF">
        <div class="flex" style="width: 3.63rem; height: 0.90rem; justify-content: space-between; align-items: center; border-style: solid; border-bottom-width: 0.01rem; border-color: #EEEEEE;" tapmode onclick="changeUserImg()">
            <p style="font-size: 0.14rem; color: #83889A;">头像</p>
            <div class="flex" style="align-items: center;">
                <div id="user-img" style="width: 0.60rem; height: 0.60rem; background-size: 0.60rem 0.60rem; margin-right: 0.10rem;"></div>
                <div class="arrow-02"></div>
            </div>
        </div>
    </div>
    <div class="flex" style="width: 100%; height: 0.50rem; justify-content: flex-end; background-color: #FFFFFF">
        <div class="flex" style="width: 3.63rem; height: 0.50rem; justify-content: space-between; align-items: center; border-style: solid; border-bottom-width: 0.01rem; border-color: #EEEEEE;" tapmode onclick="openFamilyNameWin()">
            <p style="font-size: 0.14rem; color: #83889A;">姓氏</p>
            <div class="flex" style="align-items: center;">
                <p id="family-name" style="font-size: 0.14rem; color: #26344C; margin-right: 0.10rem;"></p>
                <div class="arrow-02"></div>
            </div>
        </div>
    </div>
    <div class="flex" style="width: 100%; height: 0.50rem; justify-content: flex-end; background-color: #FFFFFF">
        <div class="flex" style="width: 3.63rem; height: 0.50rem; justify-content: space-between; align-items: center; border-style: solid; border-bottom-width: 0.01rem; border-color: #EEEEEE;" tapmode onclick="openGivenNameWin()">
            <p style="font-size: 0.14rem; color: #83889A;">名字</p>
            <div class="flex" style="align-items: center;">
                <p id="given-name" style="font-size: 0.14rem; color: #26344C; margin-right: 0.10rem;"></p>
                <div class="arrow-02"></div>
            </div>
        </div>
    </div>
    <div class="flex" style="width: 100%; height: 0.50rem; justify-content: flex-end; background-color: #FFFFFF">
        <div class="flex" style="width: 3.63rem; height: 0.50rem; justify-content: space-between; align-items: center; border-style: solid; border-bottom-width: 0.01rem; border-color: #EEEEEE;" tapmode onclick="changeSex()">
            <p style="font-size: 0.14rem; color: #83889A;">性别</p>
            <div class="flex" style="align-items: center;">
                <p id="sex" style="font-size: 0.14rem; color: #26344C; margin-right: 0.10rem;"></p>
                <div class="arrow-02"></div>
            </div>
        </div>
    </div>
    <div class="flex" style="width: 100%; height: 0.50rem; justify-content: flex-end; background-color: #FFFFFF">
        <div class="flex" style="width: 3.63rem; height: 0.50rem; justify-content: space-between; align-items: center; border-style: solid; border-bottom-width: 0.01rem; border-color: #EEEEEE;" tapmode onclick="changeBirth()">
            <p style="font-size: 0.14rem; color: #83889A;">出生时间</p>
            <div class="flex" style="align-items: center;">
                <p id="birth" style="font-size: 0.14rem; color: #26344C; margin-right: 0.10rem;"></p>
                <div class="arrow-02"></div>
            </div>
        </div>
    </div>
</body>
</html>
<script type="text/javascript" src="../../script/api.js"></script>
<script type="text/javascript" src="../../script/common/common.js"></script>
<script type="text/javascript">
    var userImgEl, familyNameEl, givenNameEl, sexEl, birthEl;
    var userInfo;
    var locked = 0, UIDatePicker;
    apiready = function () {
        userImgEl = $api.byId('user-img');
        familyNameEl = $api.byId('family-name');
        givenNameEl = $api.byId('given-name');
        sexEl = $api.byId('sex');
        birthEl = $api.byId('birth');

        UIDatePicker = api.require('UIDatePicker');

        getUserInfo();
    }

    function getUserInfo() {
        api.ajax({
            url: apiUrl + '/user/info',
            tag: '/user/info',
            method: 'get',
            data: {
                values: {
                    token: $api.getStorage("token"),
                }
            }
        }, function(ret, err) {
            if (ret) {
                if (ret.code == 0) {
                    userInfo = ret.data;

                    var sex;
                    switch(parseInt(userInfo['sex']))
                    {
                        case 0:
                            sex = "男";
                            break;
                        case 1:
                            sex = "女";
                            break;
                    }

                    let unixtime = userInfo['birthday'];
                    let unixTimestamp = new Date(unixtime * 1000);
                    userInfo['birth_year'] = unixTimestamp.getFullYear();
                    userInfo['birth_month'] = ((unixTimestamp.getMonth() + 1) > 10 ? (unixTimestamp.getMonth() + 1) : '0' + (unixTimestamp.getMonth() + 1));
                    userInfo['birth_day'] = (unixTimestamp.getDate() > 10 ? unixTimestamp.getDate() : '0' + unixTimestamp.getDate());
                    userInfo['birth_hour'] = ((unixTimestamp.getHours() + 1) > 10 ? (unixTimestamp.getHours() + 1) : '0' + (unixTimestamp.getHours() + 1));
                    userInfo['bitth_minute'] = (unixTimestamp.getMinutes() > 10 ? unixTimestamp.getMinutes() : '0' + unixTimestamp.getMinutes());

                    console.log(userInfo['avatar'])
                    $api.css(userImgEl,'background-image: url(' + userInfo['avatar'] + ');');
                    $api.text(familyNameEl, userInfo['family_name']);
                    $api.text(givenNameEl, userInfo['given_name']);
                    $api.text(sexEl, sex);
                    $api.text(birthEl, userInfo['birth_year'] + "年" + userInfo['birth_month'] + "月" + userInfo['birth_day'] + "日 " + userInfo['birth_hour'] + ":" + userInfo['bitth_minute']);

                    locked = 1;
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }

    function changeUserImg() {
        if (locked == 1) {
            api.actionSheet({
                cancelTitle: '取消',
                buttons: ['拍照', '从相册中选择']
            }, function(ret, err) {
                var index = ret.buttonIndex;
                if (index == 1) {
                    api.getPicture({
                        sourceType: 'camera',
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        destinationType: 'url',
                        quality: 80,
                        saveToPhotoAlbum: true
                    }, function(ret, err) {
                        if (ret) {
                            openImageClipWin(ret.data);
                            // pushImg(ret.data);
                        } else {
                            // alert(JSON.stringify(err));
                        }
                    });
                } else if (index == 2) {
                    api.getPicture({
                        sourceType: 'library',
                        encodingType: 'jpg',
                        mediaValue: 'pic',
                        destinationType: 'url',
                        quality: 80,
                        saveToPhotoAlbum: true
                    }, function(ret, err) {
                        if (ret) {
                            openImageClipWin(ret.data);
                            // pushImg(ret.data);
                        } else {
                            // alert(JSON.stringify(err));
                        }
                    });
                }
            });
        }
    }

    function openImageClipWin(path) {
        api.openWin({
            name: 'imageClipWin',
            url: './imageClipWin.html',
            slidBackType: 'edge',
            pageParam: {
                path: path,
            },
            animation: {
                type:"none",
            }
        });
    }

    function openFamilyNameWin() {
        if (locked == 1) {
            api.openWin({
                name: 'userInfoFamilyNameWin',
                url: './userInfoFamilyNameWin.html',
                slidBackType: 'edge',
                pageParam: {
                    family_name: userInfo['family_name'],
                },
                animation: {
                    type:"movein",
                    subType:"from_right",
                    duration:300
                }
            });
        }
    }

    function openGivenNameWin() {
        if (locked == 1) {
            api.openWin({
                name: 'userInfoGivenNameWin',
                url: './userInfoGivenNameWin.html',
                slidBackType: 'edge',
                pageParam: {
                    given_name: userInfo['given_name'],
                },
                animation: {
                    type:"movein",
                    subType:"from_right",
                    duration:300
                }
            });
        }
    }

    function changeSex() {
        if (locked == 1) {
            api.actionSheet({
                cancelTitle: '取消',
                buttons: ['男', '女']
            }, function(ret, err) {
                var index = ret.buttonIndex;
                if (index == 1) {
                    $api.text(sexEl, "男");
                    userInfo['sex'] = 0;
                    updateUserInfo("sex", 0);
                } else if (index == 2) {
                    $api.text(sexEl, "女");
                    userInfo['sex'] = 1;
                    updateUserInfo("sex", 1);
                }
            });
        }
    }

    function changeBirth() {
        if (locked == 1) {
            var date = fun_date(0), theDate;

            UIDatePicker.open({
                type: 'dateHourMinute',
                // date: theDate + " 00:00:00",
                rowHeight:40,
                maxDate:date['date'] + " 24:59:59",
                title: '选择日期',
                styles: {
                    bg: 'rgba(0,0,0,0)',
                    headerViewBackgroundColor:'rgba(0,0,0,0)',
                    lineBackgroundColor: 'rgba(223,223,228,0.3)',
                    item:{
                        normal: '#666666',
                        normalFont: 16,
                        selected: '#24253D',
                        selectedFont: 20,
                        cancelBtn:{
                            cancelButtonTextColor: '#A0522C',
                            cancelButtonText: '取消' ,
                            cancelButtonFont:16
                        },
                        confirmBtn:{
                            confirmButtonTextColor: '#A0522C',
                            confirmButtonText: '确认' ,
                            confirmButtonFont:16
                        },
                    }
                },
            }, function(ret, err) {
                if (ret) {
                    // alert(JSON.stringify(ret));
                    if (ret.eventType == "submit") {
                        var year = ret.year;
                        userInfo['birth_year'] = year;

                        var month = ret.month;
                        userInfo['birth_month'] = month;
                        if (month<10) {
                            month = "0" + month;
                        }
                        var day = ret.day;
                        userInfo['birth_day'] = day;
                        if (day<10) {
                            day = "0" + day;
                        }
                        var hour = ret.hour;
                        userInfo['birth_hour'] = hour;
                        if (hour<10) {
                            hour = "0" + hour;
                        }
                        var minute = ret.minute;
                        userInfo['bitth_minute'] = minute;
                        if (minute<10) {
                            minute = "0" + minute;
                        }

                        let data1=year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + "00";
                        userInfo['birthday']=new Date(Date.parse(data1.replace(/-/g, "/"))).getTime()/1000;

                        $api.text(birthEl, year + "年" + month + "月" + day + "日 " + hour + ":" + minute);

                        updateUserInfo("sex", userInfo['birthday']);
                    }
                } else {
                    // alert(JSON.stringify(err));
                }
            });
        }
    }

    // function changeValue(type, value) {
    //     switch(type)
    //     {
    //         case "family_name":
    //             $api.text(familyNameEl, value);
    //             userInfo['family_name'] = value;
    //             break;
    //         case "given_name":
    //             $api.text(givenNameEl, value);
    //             userInfo['given_name'] = value;
    //             break;
    //     }
    // }
    function updateUserInfo(type, value) {
        var values;
        switch(type)
        {
            case "avatar":
                values = {
                    token: $api.getStorage("token"),
                    avatar: value,
                };
                break;
            case "family_name":
                values = {
                    token: $api.getStorage("token"),
                    family_name: value,
                };
                break;
            case "given_name":
                values = {
                    token: $api.getStorage("token"),
                    given_name: value,
                };
                break;
            case "sex":
                values = {
                    token: $api.getStorage("token"),
                    sex: value,
                };
                break;
            case "birthday":
                values = {
                    token: $api.getStorage("token"),
                    birthday: value,
                };
                break;
        }
        var temApiHeader = {
            "Content-Type": "application/json",
        };
        api.ajax({
            url: apiUrl + '/user/edit',
            tag: '/user/edit',
            // method: 'post',
            // data: {
            //     values: values
            // }
            method: 'post',
            headers: temApiHeader,
            data: {
                body: values
            }
        }, function(ret, err) {
            api.alert({ msg: JSON.stringify(ret) })
            if (ret) {
                if (ret.Code == 0) {
                    api.execScript({
                        name: 'main',
                        frameName: 'frame4',
                        script: 'reloadUserInfo();'
                    });
                    window.location.reload();
                } else {
                    api.toast({
                        msg: ret.err_msg,
                        duration: 2000,
                        location: 'middle'
                    });
                }
            } else {
                // api.alert({ msg: JSON.stringify(err) });
            }
        });
    }
</script>
